<template>
	<view class="container">
		<view class="order-entries">
			<!-- 待进行订单入口 -->
			<view class="order-entry pending-entry" @click="navigateToOrder(20)">
				<view class="entry-icon">📋</view>
				<view class="entry-content">
					<view class="entry-title">待进行订单</view>
					<view class="entry-subtitle">即将开始的行程</view>
				</view>
				<view class="entry-arrow">→</view>
			</view>

			<!-- 进行中订单入口 -->
			<view class="order-entry ongoing-entry" @click="navigateToOrder(30)">
				<view class="entry-icon">🚗</view>
				<view class="entry-content">
					<view class="entry-title">进行中订单</view>
					<view class="entry-subtitle">正在执行的行程</view>
				</view>
				<view class="entry-arrow">→</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// 导航到订单页面，带状态参数
const navigateToOrder = (status) => {
	// 跳转到订单页面，并传递状态参数
	uni.navigateTo({
		url: `/pages/order/index?status=${status}`
	})
}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;
}

.header {
	padding: 20rpx 0;
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #007AFF;
}

/* 订单入口区域 */
.order-entries {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

/* 订单入口卡片 */
.order-entry {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: transform 0.2s, box-shadow 0.2s;
}

.order-entry:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

/* 待进行订单样式 */
.pending-entry {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

/* 进行中订单样式 */
.ongoing-entry {
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

/* 入口图标 */
.entry-icon {
	font-size: 64rpx;
	margin-right: 24rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
}

/* 入口内容 */
.entry-content {
	flex: 1;
}

.entry-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.pending-entry .entry-title {
	color: #0284c7;
}

.ongoing-entry .entry-title {
	color: #15803d;
}

.entry-subtitle {
	font-size: 28rpx;
	color: #666;
}

/* 箭头图标 */
.entry-arrow {
	font-size: 32rpx;
	color: #999;
}
</style>
